<template>
  <div class="index" id="index">
    <div class="bg"></div>
    <div class="content">
      <div class="shijianxian" style="position: fixed; left: 50%; top: 400px; margin-left: 636px;">
        <div class="flex">
          <div style="width: 1px; background: #ddd; position: relative;">
            <div style="position: absolute; left:-8px; width: 16px; height: 16px;" :style="{top:tops}"><img src="../assets/img/bg3.png"></div>
          </div>
          <div style="margin-left: 20px;">
            <div class="btn" :class="btn == 1 ? 'act' : ''" @click="go(1)">基本信息</div>
            <div class="btn" :class="btn == 2 ? 'act' : ''" @click="go(2)">人</div>
            <div class="btn" :class="btn == 3 ? 'act' : ''" @click="go(3)">地</div>
            <div class="btn" :class="btn == 4 ? 'act' : ''" @click="go(4)">物</div>
            <div class="btn" :class="btn == 5 ? 'act' : ''" @click="go(5)">事</div>
            <div class="btn" :class="btn == 6 ? 'act' : ''" @click="go(6)">组织</div>
          </div>
        </div>
      </div>
      <div class="flexb">
        <div class="flex">
          <div class="logo flexcc">
            江苏隆昌
          </div>
          <div class="title">
            <div class="t1">江苏隆昌化工有限公司</div>
            <div class="flex">
              <div class="t2" style="background: #ff7f5b;">办证量大</div>
              <div class="t2" style="background: #51c8f7;">有预警记录证</div>
              <div class="t2" style="background: #fead18;">库存量大</div>
              <div class="t2" style="background: #90c418;">无实体库存</div>
            </div>
          </div>
        </div>
        <div class="flex">
          <div class="t3"> <i class="el-icon-star-off"></i> 关注</div>
          <div class="t3"> <i class="el-icon-download"></i> 下载报告</div>
        </div>
      </div>

      <div class="mk" style="margin-top: 55px;" id="m1">
        <div class="title2"><img src="../assets/img/biaoti.png"></div>
        <div class="jibenxinxi flex">
          <div class="flex">
            <div class="jibenxinxi_left">
              <div class="flex">
                <div class="l">法定代表人：</div>
                <div class="r">佘道才</div>
              </div>
              <div class="flex">
                <div class="l">电话：</div>
                <div class="r">0513-80556958</div>
              </div>
              <div class="flex">
                <div class="l">统一信用社会代码：</div>
                <div class="r">913206827168772976</div>
              </div>
              <div class="flex">
                <div class="l">地址：</div>
                <div class="r">化工材料产业园</div>
              </div>
              <div class="flex">
                <div class="l">属地公安机关：</div>
                <div class="r">江苏省南通市公安局刑事警察支队</div>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="jibenxinxi_left">
              <div class="flex">
                <div class="l" style="width: 70px;">注册资本：</div>
                <div class="r" style="width: 230px;">32000000元</div>
              </div>
              <div class="flex">
                <div class="l" style="width: 70px;">企业类型：</div>
                <div class="r" style="width: 230px;">生产、使用、经营</div>
              </div>
            </div>
          </div>
          <div id="main" style="width: 260px; height: 180px;">

          </div>
        </div>
      </div>

      <div class="mk"  id="m2">
        <div class="title2"><img src="../assets/img/ren.png"></div>
        <div>
          <el-table :data="tableData"  style="width: 100%">
              <el-table-column  prop="shenfen"  label="身份"></el-table-column>
              <el-table-column  prop="xingming" label="姓名"></el-table-column>
              <el-table-column  prop="xingbie"  label="性别"></el-table-column>
              <el-table-column  prop="nianling" label="年龄"></el-table-column>
              <el-table-column  prop="lianxifangshi" label="联系方式"></el-table-column>
              <el-table-column  prop="zhuangtai" label="状态"></el-table-column>
              <el-table-column label="近半年毛发检毒记录" width="180">
                <template slot-scope="scope">
                	<div class="lvse flex" v-if="scope.row.jiandu != '无'">
                    <div style="font-size: 30px; line-height: 23px; margin-right: 2px; font-weight: bold;">·</div>
                    <div>{{ scope.row.jiandu }}</div>
                  </div>
                  <div class="lvse" v-if="scope.row.jiandu == '无'">{{ scope.row.jiandu }}</div>
                </template>
              </el-table-column>
              <el-table-column label="风险标签" width="180">
                <template slot-scope="scope">
                  <div v-if="scope.row.fengxian == '无'">{{ scope.row.fengxian }}</div>
                	<div v-if="scope.row.fengxian == '多公司任职'"><el-button type="success" size="mini" class="t4">{{ scope.row.fengxian }}</el-button></div>
                  <div v-if="scope.row.fengxian == '和吸毒人员有联系'"><el-button type="success" size="mini" class="t5">{{ scope.row.fengxian }}</el-button></div>
                </template>
              </el-table-column>
            </el-table>
        </div>
      </div>

      <div class="mk"  id="m3">
        <div class="title2"><img src="../assets/img/di.png"></div>
        <div class="jibenxinxi flex">
          <div class="flex">
            <div class="flex">
              <div class="l">注册地：</div>
              <div class="r">化工新材料产业园</div>
            </div>
            <div class="flex">
              <div class="l">实际经营地：</div>
              <div class="r">化工新材料产业园</div>
            </div>
          </div>
          <div class="flex">
            <div class="flex">
              <div class="l">污水检毒记录：</div>
              <div class="r">无</div>
            </div>
            <div class="flex">
              <div class="l">属地公安机关：</div>
              <div class="r">江苏省南通市公安局刑事警察支队</div>
            </div>
          </div>
          <div class="flex">
            <div class="flex">
              <div class="l">变更次数：</div>
              <div class="r">5</div>
            </div>
            <div class="flex">
              <div class="l">周边同类型企业：</div>
              <div class="r">
                <div class="flex">
                  <div>崇川区：<span style="color: #90c418; margin-right: 20px; font-weight: bold; font-size: 16px;">5</span></div>
                  <div>通州区：<span style="color: #c8deff; font-weight: bold; font-size: 16px;">21</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="flex">
              <div class="l">仓库所在地：</div>
              <div class="r" style="width:888px;">化工新材料产业园化工新材料产业园化工新材料产业园化工新材料产业园化工新材料产业园化化工新材料产业园化工新材料工新材料产业园化工新材料产业园化工新材料产业园</div>
            </div>
          </div>

        </div>
      </div>

      <div class="mk"  id="m4">
        <div class="title2"><img src="../assets/img/wu.png"></div>
        <div class="flexb">
          <div class="wu">
            <div class="wu_row flexbc">
              <div class="wu_title flexcc">
                <img src="../assets/img/p1.png">
                硫酸
              </div>
              <div class="flexc">
                <div class="yue" @click="yue1 = 1" :class="yue1 == 1?'lanse':''">一月</div>
                <div class="yue" @click="yue1 = 2" :class="yue1 == 2?'lanse':''">半年</div>
                <div class="yue" @click="yue1 = 3" :class="yue1 == 3?'lanse':''">一年</div>
              </div>
            </div>
            <div class="wucon">
              <div class="flex">
                <div class="l">业务类型：</div>
                <div class="r">生产、经营、使用</div>
              </div>
              <div class="flex">
                <div class="l">用途：</div>
                <div class="r">生产副产品等</div>
              </div>
              <div class="flex">
                <div class="l">需求报备量：</div>
                <div class="r">6000吨</div>
              </div>
              <div class="flex">
                <div class="l">实际发生量：</div>
                <div class="r">4000吨</div>
              </div>
              <div class="flex">
                <div class="l">购买证数量：</div>
                <div class="r">3张</div>
              </div>
              <div class="flex">
                <div class="l">运输证数量：</div>
                <div class="r">3张</div>
              </div>
            </div>
          </div>
          <div class="wu w2">
            <div class="wu_row flexbc">
              <div class="wu_title flexcc">
                <img src="../assets/img/p2.png">三氯甲烷</div>
              <div class="flexc">
                <div class="yue" @click="yue2 = 1" :class="yue2 == 1?'lvse':''">一月</div>
                <div class="yue" @click="yue2 = 2" :class="yue2 == 2?'lvse':''">半年</div>
                <div class="yue" @click="yue2 = 3" :class="yue2 == 3?'lvse':''">一年</div>
              </div>
            </div>
            <div class="wucon">
              <div class="flex">
                <div class="l">业务类型：</div>
                <div class="r">生产、经营、使用</div>
              </div>
              <div class="flex">
                <div class="l">用途：</div>
                <div class="r">生产副产品等</div>
              </div>
              <div class="flex">
                <div class="l">需求报备量：</div>
                <div class="r">6000吨</div>
              </div>
              <div class="flex">
                <div class="l">实际发生量：</div>
                <div class="r">4000吨</div>
              </div>
              <div class="flex">
                <div class="l">购买证数量：</div>
                <div class="r">3张</div>
              </div>
              <div class="flex">
                <div class="l">运输证数量：</div>
                <div class="r">3张</div>
              </div>
            </div>
          </div>
          <div class="wu w3">
            <div class="wu_row flexbc">
              <div class="wu_title flexcc">
                <img src="../assets/img/p3.png">盐酸</div>
              <div class="flexc">
                <div class="yue" @click="yue3 = 1" :class="yue3 == 1?'zise':''">一月</div>
                <div class="yue" @click="yue3 = 2" :class="yue3 == 2?'zise':''">半年</div>
                <div class="yue" @click="yue3 = 3" :class="yue3 == 3?'zise':''">一年</div>
              </div>
            </div>
            <div class="wucon">
              <div class="flex">
                <div class="l">业务类型：</div>
                <div class="r">生产、经营、使用</div>
              </div>
              <div class="flex">
                <div class="l">用途：</div>
                <div class="r">生产副产品等</div>
              </div>
              <div class="flex">
                <div class="l">需求报备量：</div>
                <div class="r">6000吨</div>
              </div>
              <div class="flex">
                <div class="l">实际发生量：</div>
                <div class="r">4000吨</div>
              </div>
              <div class="flex">
                <div class="l">购买证数量：</div>
                <div class="r">3张</div>
              </div>
              <div class="flex">
                <div class="l">运输证数量：</div>
                <div class="r">3张</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mk" id="m5">
        <div class="flexbc">
          <div class="title2"><img src="../assets/img/shi.png"></div>
          <div class="flexc" style="margin-bottom: 20px;">
            <div class="yue4" @click="yue4 = 1" :class="yue4 == 1?'lanse':''">正常业务</div>
            <div class="yue4" @click="yue4 = 2" :class="yue4 == 2?'lanse':''">审批业务</div>
            <div class="yue4" @click="yue4 = 3" :class="yue4 == 3?'lanse':''">入滇业务</div>
          </div>
        </div>

        <div>
          <el-table :data="tableData2"  style="width: 100%">
              <el-table-column  prop="shenfen"  label="事件"></el-table-column>
              <el-table-column  prop="xingming"  label="易华品"></el-table-column>
              <el-table-column  prop="xingbie"  label="数量"></el-table-column>
              <el-table-column  prop="nianling"  label="时间"></el-table-column>
              <el-table-column  prop="lianxifangshi"  label="仓库"></el-table-column>
            </el-table>
        </div>
      </div>

      <div class="mk" id="m6">
        <div class="title2"><img src="../assets/img/zuzhi.png"></div>
        <div style="height:600px">
          <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" :on-line-click="onLineClick" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  // import _ from 'lodash';
  import RelationGraph from 'relation-graph'

  export default {
    name: 'zhuce',
    components: { RelationGraph },
    data() {
      return {


        yue1:1,
        yue2:1,
        yue3:1,
        yue4:1,
        btn:1,
        tops:0,

        tableData:[
          {
            shenfen:'法定代表人',
            xingming:'佘道才',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'在职',
            jiandu:'无',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'多公司任职'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'佘道才',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'佘道才',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'和吸毒人员有联系'
          },
          {
            shenfen:'法定代表人',
            xingming:'佘道才',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'和吸毒人员有联系'
          },
          {
            shenfen:'法定代表人',
            xingming:'佘道才',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'无'
          },
          {
            shenfen:'法定代表人',
            xingming:'陆晓敏',
            xingbie:'男',
            nianling:55,
            lianxifangshi:15553523723,
            zhuangtai:'离职',
            jiandu:'阴性',
            fengxian:'和吸毒人员有联系'
          }
        ],
        tableData2:[
          {
            shenfen:'购买入库',
            xingming:'硫酸',
            xingbie:'160吨',
            nianling:'2000年3月11日',
            lianxifangshi:'化工新材料仓库',
          },
          {
            shenfen:'出库',
            xingming:'硫酸',
            xingbie:'160吨',
            nianling:'2000年3月11日',
            lianxifangshi:'乙类罐区',
          },
          {
            shenfen:'购买入库',
            xingming:'硫酸',
            xingbie:'260吨',
            nianling:'2000年3月11日',
            lianxifangshi:'乙类罐区',
          },
          {
            shenfen:'购买入库',
            xingming:'硫酸',
            xingbie:'160吨',
            nianling:'2020年3月11日',
            lianxifangshi:'化工新材料仓库',
          },
          {
            shenfen:'购买入库',
            xingming:'硫酸',
            xingbie:'160吨',
            nianling:'2023年3月11日',
            lianxifangshi:'乙类罐区',
          },
          {
            shenfen:'购买入库',
            xingming:'硫酸',
            xingbie:'160吨',
            nianling:'2000年3月11日',
            lianxifangshi:'化工新材料仓库',
          }
        ],
        graphOptions: {
          "moveToCenterWhenRefresh": false,
          "zoomToFitWhenRefresh": false,
          "useAnimationWhenRefresh": false,
          "defaultFocusRootNode": false,
          "allowShowMiniToolBar": false,
          "defaultNodeColor": "#f5f9ff",
          "defaultNodeFontColor": "#333",
          "defaultNodeBorderColor": "#f5f9ff",
          "defaultLineShape": 4,
          "defaultNodeShape": 1,
          "defaultNodeWidth": "125",
          "defaultNodeHeight": "75",
          "defaultJunctionPoint": "lr",
          "placeSingleNode": false,
          'disableZoom':true,
          // 'disableDragNode':true,
          'disableNodeClickEffect':'true',
          'disableLineClickEffect':'true',
          "layouts": [
            {
              "label": "中心",
              "layoutName": "tree",
              "layoutClassName": "seeks-layout-center",
              "defaultJunctionPoint": "border",
              "defaultNodeShape": 0,
              "from": "top",
              "min_per_width":'100',
              "max_per_width": "200",
              "min_per_height": "100",
              "max_per_height": "250",
              "centerOffset_x": "0",
              "centerOffset_y": "100",
            }
          ]
        },
      }
    },
    created() {

    },

    mounted() {

      document.getElementById('index').addEventListener("scroll", this.windowScrollListener);
      this.yibiaotu()

      this.showSeeksGraph()
    },
    watch:{
      'btn':{
        handler(newVal, oldVal) {
            if(newVal == 1){
              this.tops = 14.5 + 'px'
            }
            if(newVal > 1){
              this.tops = 45 * newVal - 30.5 + ((newVal - 1) * 10) + 'px'
            }
        },
        deep: true,
        immediate: true
      }
    },

    methods: {
      showSeeksGraph() {
         const __graph_json_data =
           {
             "rootId": "a",
             "nodes": [
               {
                 "id": "w",
                 "text": "绍兴柯桥中意化工有限公司",
                 "data": {
                   "pic": "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,462224207&fm=58&app=83&f=JPEG?w=250&h=250&s=EC708F46DA96B89CB69D5DDA0300D014",
                   "name": "绍兴柯桥中意化工有限公司",
                   "myicon": "el-icon-star-on"
                 }
               },
               {
                 "id": "a",
                 "text": "江苏隆昌化工有限公",
                 "data": {
                   "pic": "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2308340537,462224207&fm=58&app=83&f=JPEG?w=250&h=250&s=EC708F46DA96B89CB69D5DDA0300D014",
                   "name": "江苏隆昌化工有限公",
                   "myicon": "el-icon-star-on"
                 },
                 'borderColor':'#4074da',
                 'color':'#4074da',
                 'fontColor':'#fff'
               },
               {
                 "id": "b",
                 "text": "靖江市天创文化有限公司",
                 "data": {
                   "pic": "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2677153550,2207805387&fm=58&app=83&f=JPEG?w=250&h=250&s=249039DDC2D153D411A851360300C062",
                   "name": "靖江市天创文化有限公司",
                   "myicon": "el-icon-setting"
                 }
               },
               {
                 "id": "c",
                 "text": "安徽金禾实业有限公司",
                 "data": {
                   "pic": "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1725297532,1915921796&fm=58&app=83&f=JPEG?w=250&h=250&s=FE8EA444A60759554DAC1DBB03000092",
                   "name": "安徽金禾实业有限公司",
                   "myicon": "el-icon-setting"
                 }
               },
               {
                 "id": "d",
                 "text": "东昌易化有限公司",
                 "data": {
                   "pic": "https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2025797948,1615296290&fm=58&app=83&f=JPEG?w=250&h=250&s=B5B04C331F32739C4604F9F503007021",
                   "name": "东昌易化有限公司",
                   "myicon": "el-icon-star-on"
                 }
               },
               {
                 "id": "e",
                 "text": "玉荣化工有限公司",
                 "data": {
                   "pic": "https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=344720653,260255884&fm=58&app=83&f=JPEG?w=250&h=250&s=57B8AB676AE862941D94ED170300E060",
                   "name": "玉荣化工有限公司",
                   "myicon": "el-icon-setting"
                 }
               },
               {
                 "id": "f",
                 "text": "济南金永硕化工有限公司",
                 "data": {
                   "pic": "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3098576865,849900134&fm=58&app=83&f=JPEG?w=250&h=250&s=EDE01A63A65917DC104509920300C0C1",
                   "name": "济南金永硕化工有限公司",
                   "myicon": "el-icon-setting"
                 }
               },
               {
                 "id": "g",
                 "text": "双狮精细化工有限公司",
                 "data": {
                   "pic": "https://dss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3098576865,849900134&fm=58&app=83&f=JPEG?w=250&h=250&s=EDE01A63A65917DC104509920300C0C1",
                   "name": "双狮精细化工有限公司",
                   "myicon": "el-icon-setting"
                 }
               }
             ],
             "lines": [
               {
                 "from": "a",
                 "to": "w",
                 'text': '购买运输',
               },
               {
                 "from": "b",
                 "to": "a",
                 'text': '购买',
                 'useTextPath':true,
                 'lineShape':5
               },
               {
                 "from": "c",
                 "to": "a",
                 'text': '购买运输',
                 'useTextPath':true,
                 'lineShape':5
               },
               {
                 "from": "d",
                 "to": "a",
                 'text': '购买',
                 'useTextPath':true,
                 'lineShape':5
               },
               {
                 "from": "e",
                 "to": "a",
                 'text': '购买运输',
                 'useTextPath':true,
                 'lineShape':5
               },
               {
                 "from": "f",
                 "to": "a",
                 'text': '购买',
                 'useTextPath':true,
                 'lineShape':5
               },
               {
                 "from": "g",
                 "to": "a",
                 'text': '购买运输',
                 'useTextPath':true,
                 'lineShape':5
               }
             ]
           }

         // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
         this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
           // Called when the relation-graph is completed
         })
       },
       onNodeClick(nodeObject, $event) {
         console.log('onNodeClick:', nodeObject)
       },
       onLineClick(lineObject, $event) {
         console.log('onLineClick:', lineObject)
       },

      yibiaotu:function(){
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          series: [
            {
              type: 'gauge',
              startAngle: 240,
              endAngle: -60,
              center: ['50%', '50%'],
              radius: '90%',
              min: 0,
              max: 100,
              splitNumber: 10,
              axisTick: {
                show: false
              },
              axisLabel: {
                distance: 5,
                color: '#999',
                fontSize: 10
              },
              splitLine: {
                length: 0
              },
              axisLine: {
                lineStyle: {
                  color: [
                    [0.2, '#ff5a00'],
                    [0.4, '#ff790d'],
                    [0.6, '#ffca4b'],
                    [0.8, '#06d4a0'],
                    [1, '#3e8bff']
                  ]
                }
              },
              title: {
                offsetCenter: [0, '90%'],
                fontSize: 12,
                show: true
              },

              data: [
                {
                  value: 80,
                  name: '企业信用度'
                }
              ]
            }
          ]
        };

        option && myChart.setOption(option);
      },
      windowScrollListener:function(){
        let w = document.getElementById('index')
        let scrollTop = w.scrollTop

        let m1 = document.getElementById('m1').offsetTop
        let m2 = document.getElementById('m2').offsetTop
        let m3 = document.getElementById('m3').offsetTop
        let m4 = document.getElementById('m4').offsetTop
        let m5 = document.getElementById('m5').offsetTop
        let m6 = document.getElementById('m6').offsetTop

        if(w.scrollHeight - scrollTop > w.clientHeight){
          if(scrollTop >= 0){
            this.btn = 1
          }
          if(scrollTop >= m2){
            this.btn = 2
          }
          if(scrollTop >= m3){
            this.btn = 3
          }
          if(scrollTop >= m4){
            this.btn = 4
          }
          if(scrollTop >= m5){
            this.btn = 5
          }
          if(scrollTop >= m6){
            this.btn = 6
          }
        }

      },
      go:function(i){
        this.btn = i
        let who = document.getElementById('m'+i)
        let w = document.getElementById('index')
        // ,behavior:'smooth'
        w.scrollTo({top:who.offsetTop+1});
      }
    }
  }
</script>

<style scoped lang="less">
  .index{
    background: #f7f8fa; position: relative; width: 100vw; height:100vh; overflow: auto;
    .bg{ background: #4074da; height: 240px; width: 100%; position: absolute; left: 0; top: 0; z-index: 1;}
    .btn{ background: url(../assets/img/bg2.jpg); width: 108px; line-height: 45px; margin-bottom: 10px; text-align: center; cursor: pointer; color:#000;
      &:hover{ background: url(../assets/img/bg1.jpg) !important; color:#fff !important;}
    }
    .act{ background: url(../assets/img/bg1.jpg) !important;  color:#fff !important;}
    .content{ position: relative; z-index: 2; width: 1200px; margin: 0 auto; padding-top: 55px;
      .t2{ padding: 5px 10px; border-radius: 3px; margin-right: 10px; color:#fff; font-size: 12px;}
      .t4{ padding: 4px 10px; font-size: 12px; background: #5ccbf8 !important; border:1px #5ccbf8 solid; }
      .t5{ padding: 4px 10px; font-size: 12px; background: #ff7f5b !important; border:1px #ff7f5b solid; }
      .logo{ background: #8ca3cc; font-size: 20px; width: 70px; height: 70px; font-weight: bold; padding:0 15px; position: relative; top: 10px; border-radius: 5px; color:#fff;}

      .title{ margin-left:20px;
        .t1{ font-size: 30px; margin-bottom: 15px; color:#fff; font-weight: bold;}

      }
      .t3{ background: rgba(255,255,255,0.2); border: 1px rgba(255,255,255,0.2) solid; height: 34px; line-height: 34px; padding: 0px 10px; color:#fff; border-radius: 3px; margin-left: 20px; cursor: point;}

      .l{ width: 170px; text-align: right; color:#636d7c; font-size: 14px;}
      .r{width: 310px; margin-left: 10px; color:#333;  font-size: 14px;}
      .mk{ background: #fff; border-radius: 5px; padding: 30px; margin-top: 20px;
        .title2{ margin-bottom: 20px;}
        .jibenxinxi{ background: #f6faff; padding:20px; line-height: 30px;

        }
        /deep/ .el-table th.el-table__cell{background-color: #f6faff;}
        /deep/ .el-table .cell{ padding-left: 20px;}
        .lvse{ color:#90c418; }
        .lanse{ color:#3e8bff; font-weight: bold;}
        .wu{ width: 360px; border: 1px #e8f1ff solid; background: #f6faff; padding: 0 15px;
          .wu_row{ height: 65px; border-bottom: 1px #e2ece0 solid;}
          .wu_title{ font-size: 25px; color:#3e8bff; font-weight: bold;}
          .yue{ margin-left: 20px; cursor: pointer;}

          .lvse{ color:#90c418; font-weight: bold;}
          .zise{ color:#7474f9; font-weight: bold;}
          .wucon{ line-height: 30px; padding: 10px 0;}

          .l{ width: 80px; text-align: right; color:#636d7c; font-size: 12px;}
          .r{width: 230px; margin-left: 10px; color:#333;  font-size: 12px;}
        }
        .w2{ border: 1px #e5f5d1 solid; background: #f3fef1;
          .wu_title{  color:#90c418;}
        }
        .w3{ border: 1px #e1e1fe solid; background: #f1f1ff;
          .wu_title{  color:#7474f9;}
        }

        .yue4{ margin-left: 20px; cursor: pointer; font-size: 16px;}
      }
    }
  }
</style>
